<template>
  <view class="event-detail">
    <!-- 头部图片区域 -->
    <view class="header-image-container">
      <image 
        :src="activityData.cover_image || '/static/default-course.png'" 
        mode="aspectFill" 
        class="header-image"
        @error="handleImageError"
      />
      <!-- 图片遮罩层 -->
      <view class="image-overlay"></view>
    </view>

    <!-- 课程基本信息卡片 -->
    <view class="course-info-card">
      <view class="course-header">
        <view class="course-title">{{ activityData.title }}</view>
        <view class="price-container">
          <view class="price-display">
            <!-- 一行展示：原价 + 新品价 + 标签 -->
            <view class="price-row">
              <!-- 价格部分 -->
              <view class="price-section">
                <!-- 如果有新品价，显示原价（删除线）+ 新品价 -->
                <template v-if="hasNewProductPrice()">
                  <text class="original-price">￥{{ getOriginalPrice() }}</text>
                  <text class="price-symbol">￥</text>
                  <text class="current-price">{{ getNewProductPrice() }}</text>
                </template>
                <!-- 否则只显示原价 -->
                <template v-else>
                  <text class="price-symbol">￥</text>
                  <text class="current-price">{{ getOriginalPrice() }}</text>
                </template>
                <text class="price-label">/人</text>
              </view>
              
              <!-- 标签部分 -->
              <view class="price-tags-inline">
                <text class="price-tag boutique-tag" v-if="activityData.group_status === 3 || activityData.class_type === 4">定制班</text>
                <text 
                  class="price-tag new-product-tag" 
                  v-if="shouldShowNewProductTag()"
                >
                  新品价
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 课程简介 -->
      <view class="course-brief" v-if="activityData.brief_intro">
        {{ activityData.brief_intro }}
      </view>

      <!-- 课程详细信息 -->
      <view class="course-details">
        <view class="detail-item">
          <u-icon name="clock" size="20" color="#666"></u-icon>
          <text class="detail-text">{{ activityData.start_time }}</text>
        </view>
        <view class="detail-item">
          <u-icon name="map" size="20" color="#666"></u-icon>
          <text class="detail-text">{{ activityData.location ? activityData.location.name : '未知地点' }}</text>
        </view>
        <view class="detail-item">
          <u-icon name="info-circle" size="20" color="#666"></u-icon>
          <text class="detail-text">适合年龄 {{ activityData.min_age || '3' }} ～ {{ activityData.max_age || '12' }} 岁</text>
        </view>
      </view>
    </view>

    <!-- 陪伴师信息卡片（如果已分配） -->
    <view v-if="activityData.coach && activityData.coach.name" class="coach-info-card">
      <view class="card-title">
        <u-icon name="account" size="20" color="#0dc160" style="margin-right: 8rpx;"></u-icon>
        陪伴师信息
      </view>
      <view class="coach-content">
        <view class="coach-avatar-container">
          <image 
            :src="activityData.coach.avatar || '/static/default-avatar.png'" 
            mode="aspectFill" 
            class="coach-avatar"
            @error="handleImageError"
          />
        </view>
        <view class="coach-details">
          <view class="coach-name">{{ activityData.coach.name }}</view>
          <view class="coach-intro">{{ activityData.coach.intro || '暂无介绍' }}</view>
          <u-rate
            :disabled="true"
            :value="activityData.coach.coach_level_id"
            color="#E7E7E7"
            active-color="#FF5B00"
            style="margin-top: 10rpx"
            @change.prevent
          />
        </view>
      </view>
    </view>

    <!-- 课程简介卡片 -->
    <view class="description-card">
      <view class="card-title">
        <u-icon name="list" size="20" color="#0dc160" style="margin-right: 8rpx;"></u-icon>
        课程简介
      </view>
      <view class="description-content">
        {{ activityData.description || '暂无课程简介' }}
      </view>
      <view v-if="activityData.cover_image" class="description-image">
        <image 
          :src="activityData.cover_image" 
          mode="widthFix" 
          class="content-image"
          @error="handleImageError"
        />
      </view>
    </view>

    <!-- 排课状态卡片（仅未完成状态显示） -->
    <view v-if="shouldShowStatus()" class="status-card">
      <view class="card-title">
        <u-icon name="info-circle" size="20" color="#0dc160" style="margin-right: 8rpx;"></u-icon>
        排课状态
      </view>
      <view class="status-content">
        <view class="status-badge" :class="getScheduleStatusClass()">
          {{ getScheduleStatus() }}
        </view>
        <view class="status-description">
          {{ getStatusDescription() }}
        </view>
      </view>
    </view>

    <!-- 操作按钮区域（仅未完成状态显示） -->
    <view v-if="shouldShowActions()" class="action-card">
      <view class="card-title">
        <u-icon name="setting" size="20" color="#0dc160" style="margin-right: 8rpx;"></u-icon>
        操作
      </view>
      <view class="action-buttons">
        <!-- 邀请陪伴师按钮 -->
        <view 
          v-if="shouldShowInviteButton()"
          class="action-btn invite-btn"
          :class="{ disabled: isInviteDisabled() }"
          @click="invite"
        >
          <u-icon name="plus" size="20" color="#fff" style="margin-right: 8rpx;"></u-icon>
          邀请陪伴师
        </view>
        
        <!-- 确认/拒绝按钮 -->
        <template v-if="shouldShowConfirmButtons()">
          <view 
            class="action-btn confirm-btn"
            :class="{ 'btn-loading': actionStates.confirming }"
            @click="confirmCoach"
          >
            <u-loading 
              v-if="actionStates.confirming" 
              mode="circle" 
              size="20" 
              color="#fff"
              style="margin-right: 8rpx;"
            ></u-loading>
            <u-icon v-else name="checkmark" size="20" color="#fff" style="margin-right: 8rpx;"></u-icon>
            {{ actionStates.confirming ? '确认中...' : '确认陪伴师' }}
          </view>
          <view 
            class="action-btn reject-btn"
            :class="{ 'btn-loading': actionStates.confirming }"
            @click="rejectCoach"
          >
            <u-loading 
              v-if="actionStates.confirming" 
              mode="circle" 
              size="20" 
              color="#fff"
              style="margin-right: 8rpx;"
            ></u-loading>
            <u-icon v-else name="close" size="20" color="#fff" style="margin-right: 8rpx;"></u-icon>
            {{ actionStates.confirming ? '拒绝中...' : '拒绝陪伴师' }}
          </view>
        </template>
      </view>
    </view>

    <!-- 底部安全区域 -->
    <view class="bottom-safe-area"></view>
  </view>
</template>

<script>
import { getCourseScheduleDetail } from '@/api/course_schedule';
import { confirmGrab } from '@/api/class_share';
import { getImageUri } from '@/utils/tools';

export default {
  name: 'ClassManageDetail',
  data() {
    return {
      scheduleId: '',
      activityData: {
        cover_image: '',
        title: '',
        brief_intro: '',
        start_time: '',
        location: null,
        min_age: 0,
        max_age: 0,
        description: '',
        normal_price: 0,
        group_status: 0,
        price_info: null,
        coach: null,
        // 排课相关状态
        coach_id: 0,
        pending_type: 0,
        api_data: null
      },
      offset: [200, 400],
      showAllSignupUsers: false,
      showAllWatchUsers: false,
      // 操作状态
      actionStates: {
        confirming: false,
      },
    };
  },
  computed: {
    gradientColor() {
      return 'linear-gradient(117deg, #FCF21F 0%, #32B576 100%)';
    },
    progress() {
      return (this.activityData.signup_count / this.activityData.max_participants) * 100 + '%';
    },
  },
  onLoad(options) {
    this.scheduleId = options.id;
    
    // 确保配置已加载
    if (!this.$store.state.app.config.oss_domain) {
      this.$store.dispatch('getConfig').then(() => {
        console.log('配置已加载:', this.$store.state.app.config);
        this.loadScheduleDetail();
      });
    } else {
      this.loadScheduleDetail();
    }
  },
  methods: {
    onClick() {
      console.log('点击了');
    },
    
    // 价格相关方法 - 管理端专用逻辑
    getOriginalPrice() {
      return parseFloat(this.activityData.normal_price || 0).toFixed(2);
    },
    
    getNewProductPrice() {
      const priceInfo = this.activityData.price_info;
      return parseFloat(priceInfo?.new_product_price || 0).toFixed(2);
    },
    
    hasNewProductPrice() {
      // 定制班不支持新品价
      if (this.activityData.group_status === 3 || this.activityData.class_type === 4) {
        return false;
      }
      const priceInfo = this.activityData.price_info;
      return priceInfo && priceInfo.new_product_price_enabled && parseFloat(priceInfo.new_product_price || 0) > 0;
    },
    
    hasNewProductDiscount() {
      return this.hasNewProductPrice();
    },
    
    shouldShowNewProductTag() {
      // 判断是否显示新品价标签（定制班除外）
      // group_status === 3 是定制班，class_type === 4 也是定制班
      if (this.activityData.group_status === 3 || this.activityData.class_type === 4) {
        return false;
      }
      return this.hasNewProductPrice();
    },
    
    handleImageError() {
      console.error('课程封面图片加载失败');
      console.log('当前图片URL:', this.getImageUrl(this.activityData.cover_image));
      console.log('原始图片字段:', this.activityData.cover_image);
      console.log('当前oss_domain:', this.$store.state.app.config.oss_domain);
      // 可以设置默认图片
      this.activityData.cover_image = '/static/default-course.png';
    },
    
    // 处理图片URL
    getImageUrl(url) {
      if (!url) return '/static/default-course.png';
      if (url.startsWith('http://') || url.startsWith('https://')) {
        return url;
      }
      
      // 首先尝试使用store中的oss_domain
      const ossDomain = this.$store.state.app.config.oss_domain;
      if (ossDomain) {
        return ossDomain + url;
      }
      
      // 如果store中没有oss_domain，使用固定域名作为备选
      return `https://txjmk-test.oss-cn-shenzhen.aliyuncs.com/${url}`;
    },
    loadScheduleDetail() {
      getCourseScheduleDetail({ schedule_id: this.scheduleId })
        .then(res => {
          console.log('=== 排课详情调试信息 ===');
          console.log('完整接口返回:', res);
          console.log('图片字段检查:', {
            cover_image: res.cover_image,
            image: res.image,
            course_type_icon: res.course_type_icon
          });
          
          // 检查图片处理过程
          const imageUrl = res.image || res.cover_image || res.course_type_icon;
          console.log('选择的原始图片URL:', imageUrl);
          
          // 检查store状态
          console.log('当前store状态:', {
            config: this.$store.state.app.config,
            oss_domain: this.$store.state.app.config.oss_domain
          });
          
          const processedUrl = this.getImageUrl(imageUrl);
          console.log('处理后的图片URL:', processedUrl);
          console.log('=== 结束调试信息 ===');
          
          this.activityData = {
            cover_image: this.getImageUrl(imageUrl),  // 使用处理后的图片URL
            title: res.course_title,
            brief_intro: res.brief_intro,
            start_time: res.start_time,
            location: {
              name: res.location_name,
              province: res.province,
              city: res.city,
              district: res.district,
              address: res.address,
            },
            min_age: res.min_age || 3,
            max_age: res.max_age || 12,
            description: res.description || res.brief_intro || res.course_title,
            normal_price: res.normal_price || res.price || 0,
            group_status: res.group_status || 0,
            price_info: res.price_info || null,
            coach: res.coach_id > 0 ? {
              name: res.coach_name,
              avatar: this.getImageUrl(res.coach_avatar), // 处理头像URL
              intro: res.coach_intro,
              coach_level_id: res.coach_level_id || 3
            } : null,
            // 排课相关状态数据
            coach_id: res.coach_id || 0,
            pending_type: res.pending_type || 0,
            api_data: {
              ...res,
              matching_id: res.matching_id || null,
              matching_type: res.matching_type || null,
              matching_status: res.matching_status || null
            }
          };
          
          // 测试图片是否能加载
          this.testImageLoad(processedUrl);
        })
        .catch(error => {
          console.error('请求失败:', error);
        });
    },
    
    // 测试图片加载
    testImageLoad(url) {
      if (!url) {
        console.log('没有图片URL可测试');
        return;
      }
      
      console.log('测试图片加载:', url);
      
      // 使用uni.getImageInfo测试图片是否能加载
      uni.getImageInfo({
        src: url,
        success: (res) => {
          console.log('图片加载成功:', res);
        },
        fail: (err) => {
          console.error('图片加载失败:', err);
          console.log('尝试其他可能的URL格式...');
          
          // 如果原始URL失败，尝试不同的域名
          const fallbackUrl = `https://txjmk-test.oss-cn-shenzhen.aliyuncs.com/${this.activityData.cover_image}`;
          console.log('尝试备用URL:', fallbackUrl);
          
          uni.getImageInfo({
            src: fallbackUrl,
            success: (res2) => {
              console.log('备用URL加载成功:', res2);
              // 更新图片URL
              this.activityData.cover_image = fallbackUrl;
            },
            fail: (err2) => {
              console.error('备用URL也失败:', err2);
            }
          });
        }
      });
    },
    
    // 排课状态相关方法（从index.vue复制）
    getScheduleStatus() {
      const status = this.activityData.group_status;
      const pendingType = this.activityData.pending_type;
      const apiData = this.activityData.api_data;
      
      const groupStatus = parseInt(status);
      
      // 1. 排课失败状态
      if (groupStatus === 9) {
        return '排课失败';
      }
      
      // 2. 已排课状态（group_status >= 1 且不是9）
      if (groupStatus >= 1) {
        return '已排课';
      }
      
      // 3. 排课流程中（group_status = 0）- 基于matching状态判断
      if (groupStatus === 0) {
        const matchingId = apiData?.matching_id;
        const matchingStatus = apiData?.matching_status;
        const matchingType = parseInt(apiData?.matching_type || 0);
        
        // 没有匹配记录，纯待排课状态
        if (!matchingId || matchingId === null) {
          return '待排课';
        }
        
        // 有匹配记录的情况
        if (matchingId) {
          // 被拒绝的匹配，回到待排课状态
          if (parseInt(matchingStatus) === 2) {
            return '待排课';
          }
          
          // 待处理的匹配
          if (parseInt(matchingStatus) === 0) {
            // 陪伴师抢单，需要管理员确认
            if (matchingType === 2) {
              return '待确认';
            }
            // 系统指派，等待陪伴师确认
            if (matchingType === 1) {
              return '待陪伴师确认';
            }
          }
          
          // 已确认的匹配
          if (parseInt(matchingStatus) === 1) {
            return '已确认待排课';
          }
        }
      }
      
      return '待排课';
    },
    
    getScheduleStatusClass() {
      const status = this.activityData.group_status;
      const apiData = this.activityData.api_data;
      const numStatus = parseInt(status);
      
      // 1. 排课失败状态
      if (numStatus === 9) {
        return 'schedule-failed'; // 红色
      }
      
      // 2. 已排课状态（group_status >= 1 且不是9）
      if (numStatus >= 1) {
        return 'scheduled-success'; // 绿色
      }
      
      // 3. 排课流程中（group_status = 0）- 基于matching状态判断
      if (numStatus === 0) {
        const matchingId = apiData?.matching_id;
        const matchingStatus = apiData?.matching_status;
        const matchingType = parseInt(apiData?.matching_type || 0);
        
        // 没有匹配记录，纯待排课状态
        if (!matchingId || matchingId === null) {
          return 'pending-schedule'; // 橙色
        }
        
        // 有匹配记录的情况
        if (matchingId) {
          // 被拒绝的匹配，回到待排课状态
          if (parseInt(matchingStatus) === 2) {
            return 'pending-schedule'; // 橙色
          }
          
          // 待处理的匹配
          if (parseInt(matchingStatus) === 0) {
            // 陪伴师抢单，需要管理员确认
            if (matchingType === 2) {
              return 'pending-confirm'; // 蓝色
            }
            // 系统指派，等待陪伴师确认
            if (matchingType === 1) {
              return 'system-assign-confirm'; // 蓝色
            }
          }
          
          // 已确认的匹配
          if (parseInt(matchingStatus) === 1) {
            return 'confirmed-pending'; // 浅绿色
          }
        }
      }
      
      return 'pending-schedule'; // 默认橙色
    },
    
    getStatusDescription() {
      const status = this.getScheduleStatus();
      const descriptions = {
        '待排课': '当前还未分配陪伴师，请邀请陪伴师来排课',
        '待确认': '陪伴师已申请该排课，请确认是否接受',
        '待陪伴师确认': '已邀请陪伴师，等待陪伴师确认',
        '已确认待排课': '陪伴师已确认，等待系统排课',
        '已排课': '排课已完成，课程安排已确定',
        '排课失败': '排课过程中出现问题，可重新邀请陪伴师'
      };
      return descriptions[status] || '状态未知';
    },
    
    // 🔥 新增：判断是否显示排课状态卡片
    shouldShowStatus() {
      // 与操作区域同样的逻辑：只有未完成状态才显示排课状态
      const groupStatus = parseInt(this.activityData.group_status);
      
      // 明确判断：只有group_status为0（排课中）时才显示状态卡片
      // 其他所有状态（1,2,3,4,5,6,7,8,9等）都是已完成，不显示状态
      if (groupStatus !== 0) {
        return false;
      }
      
      // 🔥 新增：只有在待排课状态（group_status = 0）下才判断是否过期
      if (groupStatus === 0 && this.isExpiredCourse()) {
        return false;
      }
      
      return !this.isScheduleFinished();
    },
    
    // 判断是否显示操作区域
    shouldShowActions() {
      // 只有未完成状态才显示操作按钮
      const groupStatus = parseInt(this.activityData.group_status);
      
      // 明确判断：只有group_status为0（排课中）时才显示操作按钮
      // 其他所有状态（1,2,3,4,5,6,7,8,9等）都是已完成，不显示操作
      if (groupStatus !== 0) {
        return false;
      }
      
      // 🔥 修正：只有在待排课状态（group_status = 0）下才判断是否过期
      if (groupStatus === 0 && this.isExpiredCourse()) {
        return false;
      }
      
      return !this.isScheduleFinished();
    },
    
    // 检查是否应该显示邀请按钮
    shouldShowInviteButton() {
      // 只有在待排课状态下才显示邀请按钮
      if (this.activityData.group_status !== 0) {
        return false;
      }
      
      // 🔥 修正：只有在待排课状态（group_status = 0）下才判断是否过期
      if (this.activityData.group_status === 0 && this.isExpiredCourse()) {
        return false;
      }
      
      const matchingId = this.activityData.api_data?.matching_id;
      const matchingStatus = this.activityData.api_data?.matching_status;
      
      // 1. 没有匹配记录的纯待排课状态
      if (!matchingId || matchingId === null) {
        return true;
      }
      
      // 2. 被拒绝后回到待排课状态
      if (matchingId && parseInt(matchingStatus) === 2) {
        return true;
      }
      
      return false;
    },
    
    // 检查是否应该显示确认拒绝按钮
    shouldShowConfirmButtons() {
      // 只有在group_status=0且有匹配记录的情况下才可能显示
      if (this.activityData.group_status !== 0) {
        return false;
      }
      
      // 🔥 修正：只有在待排课状态（group_status = 0）下才判断是否过期
      if (this.activityData.group_status === 0 && this.isExpiredCourse()) {
        return false;
      }
      
      const matchingId = this.activityData.api_data?.matching_id;
      const matchingStatus = this.activityData.api_data?.matching_status;
      const matchingType = parseInt(this.activityData.api_data?.matching_type || 0);
      
      // 只有在陪伴师抢单且待处理状态时才显示确认拒绝按钮
      if (matchingId && 
          parseInt(matchingStatus) === 0 && 
          matchingType === 2) {
        return true;
      }
      
      return false;
    },
    
    // 检查排课是否已完成或失败
    isScheduleFinished() {
      const status = parseInt(this.activityData.group_status);
      return status !== 0;
    },
    
    // 检查邀请按钮是否应该禁用
    isInviteDisabled() {
      if (this.isScheduleFinished()) {
        return true;
      }
      return false;
    },
    
    // 检查课程是否已过期
    isExpiredCourse() {
      if (!this.activityData.start_time) {
        return false;
      }
      
      const currentTime = new Date().getTime();
      const startTime = new Date(this.activityData.start_time).getTime();
      // 课程开始时间前1小时为报名截止时间
      const deadlineTime = startTime - (1 * 60 * 60 * 1000);
      
      return currentTime > deadlineTime;
    },
    
    // 邀请陪伴师
    invite() {
      // 排课完成或失败时禁用邀请功能
      if (this.isScheduleFinished()) {
        uni.showToast({
          title: '该排课已完成或失败，无法邀请陪伴师',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      uni.navigateTo({
        url: `/pages/teacher_manage/index?id=${this.scheduleId}`,
      });
    },
    
    // 确认陪伴师
    confirmCoach() {
      // 防止重复点击
      if (this.actionStates.confirming) {
        return;
      }
      
      uni.showModal({
        title: '确认',
        content: '确定要接受该陪伴师吗？',
        success: (res) => {
          if (res.confirm) {
            this.handleCoachConfirmation('accept');
          }
        }
      });
    },
    
    // 拒绝陪伴师
    rejectCoach() {
      // 防止重复点击
      if (this.actionStates.confirming) {
        return;
      }
      
      uni.showModal({
        title: '拒绝',
        content: '确定要拒绝该陪伴师吗？',
        success: (res) => {
          if (res.confirm) {
            this.handleCoachConfirmation('reject');
          }
        }
      });
    },
    
    // 处理确认/拒绝陪伴师
    handleCoachConfirmation(action) {
      console.log('处理确认/拒绝操作:', {
        action,
        scheduleId: this.scheduleId,
        activityData: this.activityData
      });

      // 设置确认状态
      this.actionStates.confirming = true;
      
      // 添加触觉反馈
      uni.vibrateShort({
        type: action === 'accept' ? 'medium' : 'light'
      });

      // 从API数据中获取matching_id
      const matchingId = this.activityData.api_data?.matching_id;
      
      console.log('获取到的matching_id:', matchingId);

      if (matchingId && matchingId > 0) {
        this.confirmWithMatchingId(matchingId, action);
      } else {
        this.actionStates.confirming = false;
        console.error('未找到有效的matching_id:', {
          matching_id: matchingId,
          api_data: this.activityData.api_data
        });
        uni.showToast({
          title: '未找到匹配ID，请刷新页面重试',
          icon: 'none',
          duration: 3000
        });
      }
    },
    
    // 使用matching_id进行确认/拒绝操作
    confirmWithMatchingId(matchingId, action) {
      confirmGrab({
        matching_id: matchingId,
        status: action === 'accept' ? 1 : 2 // 1表示接受，2表示拒绝
      }).then(res => {
        // 清除确认状态
        this.actionStates.confirming = false;
        
        // 确认成功的处理逻辑
        console.log('确认操作成功响应:', res);
        
        // 使用固定的成功提示消息
        const successMsg = action === 'accept' ? '已接受陪伴师' : '已拒绝陪伴师';
        uni.showToast({
          title: successMsg,
          icon: 'success',
          duration: 2000
        });
        
        // 重新加载详情数据
        this.loadScheduleDetail();
        
      }).catch(err => {
        // 清除确认状态
        this.actionStates.confirming = false;
        
        // 显示错误提示
        console.error('确认/拒绝操作失败:', err);
        uni.showToast({
          title: typeof err === 'string' ? err : '操作失败，请重试',
          icon: 'none',
          duration: 2000
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.event-detail {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 头部图片区域 */
.header-image-container {
  position: relative;
  width: 100%;
  height: 400rpx;
  overflow: hidden;
  
  @media screen and (max-width: 375px) {
    height: 350rpx;
  }
  
  @media screen and (min-width: 768px) {
    height: 450rpx;
  }
}

.header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
}

/* 课程信息卡片 */
.course-info-card {
  margin: -40rpx 24rpx 32rpx;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx 0;
  box-shadow: 
    0 8rpx 32rpx rgba(0, 0, 0, 0.08),
    0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 2;
}

.course-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 32rpx;
  margin-bottom: 24rpx;
  flex-wrap: wrap;
  gap: 16rpx;
}

.course-title {
  font-weight: 600;
  font-size: 40rpx;
  color: #1a1a1a;
  line-height: 1.3;
  flex: 1;
  min-width: 200rpx;
  
  @media screen and (max-width: 375px) {
    font-size: 36rpx;
  }
}

.price-container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.course-brief {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.5;
  margin: 0 32rpx 24rpx;
  padding: 16rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.course-details {
  display: flex;
  flex-direction: column;
  padding: 0 32rpx;
  gap: 20rpx;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 12rpx 0;
  
  .u-icon {
    flex-shrink: 0;
    margin-right: 16rpx;
  }
}

.detail-text {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.4;
  flex: 1;
}

/* 陪伴师信息卡片 */
.coach-info-card {
  margin: 0 24rpx 32rpx;
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 
    0 4rpx 16rpx rgba(0, 0, 0, 0.06),
    0 1rpx 4rpx rgba(0, 0, 0, 0.04);
}

.coach-info-card .card-title,
.description-card .card-title {
  padding: 32rpx 32rpx 16rpx;
  font-weight: 600;
  font-size: 32rpx;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.coach-content {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx 32rpx;
}

.coach-avatar-container {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 24rpx;
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.coach-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coach-details {
  flex: 1;
  min-width: 0;
}

.coach-name {
  font-weight: 600;
  font-size: 30rpx;
  color: #1a1a1a;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-intro {
  font-weight: 400;
  font-size: 26rpx;
  color: #888888;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 课程简介卡片 */
.description-card {
  margin: 0 24rpx;
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 
    0 4rpx 16rpx rgba(0, 0, 0, 0.06),
    0 1rpx 4rpx rgba(0, 0, 0, 0.04);
}

.description-content {
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
  padding: 16rpx 32rpx 32rpx;
  text-align: justify;
  word-break: break-word;
}

.description-image {
  margin: 20rpx 32rpx 32rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.content-image {
  width: 100%;
  border-radius: 12rpx;
}

/* 价格显示优化 */
.price-display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 200rpx;
  
  .price-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12rpx;
    flex-wrap: wrap;
    
    .price-section {
      display: flex;
      align-items: baseline;
      gap: 4rpx;
      white-space: nowrap;
      
      .original-price {
        font-size: 20rpx;
        color: #ccc;
        text-decoration: line-through;
        margin-right: 8rpx;
      }
      
      .price-symbol {
        font-size: 24rpx;
        color: #0dc160;
        font-weight: 500;
      }
      
      .current-price {
        font-size: 44rpx;
        color: #0dc160;
        font-weight: bold;
        
        @media screen and (max-width: 375px) {
          font-size: 40rpx;
        }
      }
      
      .price-label {
        font-size: 24rpx;
        color: #999;
        margin-left: 8rpx;
      }
    }
    
    .price-tags-inline {
      display: flex;
      align-items: center;
      gap: 6rpx;
      flex-wrap: wrap;
      
      .price-tag {
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
        font-size: 20rpx;
        font-weight: 600;
        text-align: center;
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
        white-space: nowrap;
        
        // 精品班标签
        &.boutique-tag {
          background: linear-gradient(135deg, #722ed1, #9254de);
          color: #fff;
          box-shadow: 0 2rpx 8rpx rgba(114, 46, 209, 0.3);
        }
        
        // 新人价标签
        &.newbie-tag {
          background: linear-gradient(135deg, #ff6b35, #ff8c42);
          color: #fff;
          box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3);
        }
        
        // 新品价标签
        &.new-product-tag {
          background: linear-gradient(135deg, #52c41a, #73d13d);
          color: #fff;
          box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3);
        }
        
        // 权益价标签
        &.benefit-tag {
          background: linear-gradient(135deg, #52c41a, #73d13d);
          color: #fff;
          box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3);
        }
      }
    }
  }
}

/* 排课状态卡片 */
.status-card,
.action-card {
  margin: 0 24rpx 32rpx;
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 
    0 4rpx 16rpx rgba(0, 0, 0, 0.06),
    0 1rpx 4rpx rgba(0, 0, 0, 0.04);
}

.status-card .card-title,
.action-card .card-title {
  padding: 32rpx 32rpx 16rpx;
  font-weight: 600;
  font-size: 32rpx;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.status-content {
  display: flex;
  flex-direction: column;
  padding: 24rpx 32rpx 32rpx;
  gap: 16rpx;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: #fff;
  text-align: center;
  width: fit-content;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
  
  // 待排课状态
  &.pending-schedule {
    background: linear-gradient(135deg, #f36806, #ff8c42);
  }
  
  // 待确认状态  
  &.pending-confirm {
    background: linear-gradient(135deg, #007aff, #409eff);
  }
  
  // 系统指派待确认状态
  &.system-assign-confirm {
    background: linear-gradient(135deg, #007aff, #409eff);
  }
  
  // 已确认待排课状态
  &.confirmed-pending {
    background: linear-gradient(135deg, #52c41a, #73d13d);
  }
  
  // 已排课成功
  &.scheduled-success {
    background: linear-gradient(135deg, #0dc160, #13ce66);
  }
  
  // 排课失败状态
  &.schedule-failed {
    background: linear-gradient(135deg, #fa3534, #ff6b6b);
  }
}

.status-description {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
  text-align: left;
  word-break: break-word;
}

.action-buttons {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx 32rpx;
  gap: 16rpx;
  flex-wrap: wrap;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 32rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  transition: all 0.3s ease;
  min-height: 80rpx;
  
  &:active:not(.disabled):not(.btn-loading) {
    transform: scale(0.98);
  }
  
  &.btn-loading {
    opacity: 0.8;
    pointer-events: none;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      animation: shimmer 1.5s infinite;
    }
  }
  
  &.disabled {
    background: #f5f5f5;
    color: #cccccc;
    border: 1px solid #e1e1e1;
    pointer-events: none;
    opacity: 0.6;
    box-shadow: none;
  }
}

.invite-btn {
  background: linear-gradient(135deg, #0dc160, #13ce66);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(13, 193, 96, 0.3);
  
  &:hover:not(.disabled):not(.btn-loading) {
    background: linear-gradient(135deg, #0bb154, #11b95a);
    box-shadow: 0 6rpx 16rpx rgba(13, 193, 96, 0.4);
  }
}

.confirm-btn {
  background: linear-gradient(135deg, #007aff, #409eff);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
  
  &:hover:not(.disabled):not(.btn-loading) {
    background: linear-gradient(135deg, #0056b3, #357abd);
    box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.4);
  }
}

.reject-btn {
  background: linear-gradient(135deg, #fa3534, #ff6b6b);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(250, 53, 52, 0.3);
  
  &:hover:not(.disabled):not(.btn-loading) {
    background: linear-gradient(135deg, #d32f2f, #f44336);
    box-shadow: 0 6rpx 16rpx rgba(250, 53, 52, 0.4);
  }
}

// 加载动画
@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* 底部安全区域 */
.bottom-safe-area {
  height: 40rpx;
  
  // iPhone X 及以上机型适配
  @supports (bottom: constant(safe-area-inset-bottom)) {
    height: calc(40rpx + constant(safe-area-inset-bottom));
  }
  
  @supports (bottom: env(safe-area-inset-bottom)) {
    height: calc(40rpx + env(safe-area-inset-bottom));
  }
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
  .course-info-card,
  .coach-info-card,
  .description-card,
  .status-card,
  .action-card {
    margin-left: 16rpx;
    margin-right: 16rpx;
  }
  
  .course-header,
  .course-details,
  .card-title,
  .coach-content,
  .description-content,
  .status-content,
  .action-buttons {
    padding-left: 24rpx;
    padding-right: 24rpx;
  }
}

@media screen and (min-width: 768px) {
  .course-info-card,
  .coach-info-card,
  .description-card,
  .status-card,
  .action-card {
    max-width: 600rpx;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 加载动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.course-info-card,
.coach-info-card,
.description-card,
.status-card,
.action-card {
  animation: fadeInUp 0.6s ease-out;
}

.coach-info-card {
  animation-delay: 0.1s;
}

.description-card {
  animation-delay: 0.2s;
}

.status-card {
  animation-delay: 0.3s;
}

.action-card {
  animation-delay: 0.4s;
}
</style>
